Compose UI Test 是 Jetpack Compose 提供的測試框架，用來驗證 UI 元件的行為。例如檢查元件的顯示、互動（如點擊按鈕）、狀態變化等，確保元件正確運作。

事前準備

首先建立一個測試用的 Composable，其目的是在測試情境中檢查：點擊按鈕後，上方顯示的文字是否會自動加一。這能幫助確認 UI 元件的互動是否符合預期，確保功能正常運作。

@Composable
fun Greeting(modifier: Modifier = Modifier) {
    val number = remember { mutableIntStateOf(0) }
    Column(
        modifier = Modifier.padding(20.dp)
    ) {
        Text(
            text = "${number.intValue}"
        )
        Button(
            onClick = {
                number.intValue ++
            }
        ) {
            Text(
                text = "Add",
                modifier = modifier
            )
        }
    }
}

實作測試

我們在 androidTest 中建立測試，以下為完整程式碼，接下來會一行一行進行說明。

class ComposeTest {

    @get:Rule
    val composeTestRule = createComposeRule()


    @Test
    fun greetingTest_addNumber() {
        composeTestRule.setContent {
            Greeting()
        }

        composeTestRule.onNodeWithText("Add").performClick()

        composeTestRule.onNodeWithText("1").assertIsDisplayed()
    }
}

首先我們使用createComposeRule建立 Compose 測試環境

。createComposeRule ：用來建立測試規則，以便在 UI 測試中控制組件的行為和狀態。透過它，可以初始化 Compose 測試環境、執行組件佈局。

    @get:Rule
    val composeTestRule = createComposeRule()

接著我們把要測試的 UI 放進來。

。composeTestRule.setContent：把要測試的 UI 放進去。

composeTestRule.setContent {
  Greeting()
}

然後我們要找到我們的 Button ，因此使用 onNodeWithText 尋找符合的 UI 元件，接著點擊他。

。onNodeWithText：尋找Node中符合文字的元件

composeTestRule.onNodeWithText("Add").performClick()

最後我們找出畫面中有沒有 1 的文字來判斷是否有成功執行。

composeTestRule.onNodeWithText("1").assertIsDisplayed()

執行結果